<template>
<!-- 使用外壳组件 -->
  <waike title="sort">
  <template>
    <div class="me">
      <!-- sessionStorage中islogin位空，显示登录 -->
      <!-- v-if="this.$store.state.islogin" -->
      <div  class="content">
        <div >
          <div class="user_cont">
              <h3 class="user_name" v-if="this.$store.state.islogin"> {{uname}} </h3>
              <!-- <h3 class="user_name" @click="jump" v-else>请先登录</h3> -->
              <p class="update" >修改信息<van-icon name="edit" style="top:0.1rem;left:0.1rem"/></p>
              <van-image class="user_avatar" round width="5rem" height="5rem" :src="avatar"/>
          </div>

          <div style="margin-top:8rem;font-size:0.1rem">
              <div class="avatar_left" style="margin-left:2rem"><span>0</span><div>关注</div></div>
              <div class="avatar_left" style="margin-left:1rem"><span>0</span><div>粉丝</div></div>
          </div>
        </div>
        <!-- <button v-else 
          style="position:absolute;
            top:6rem;width:6rem;left:35%;
            border:1px solid red;
            color:white;background-color:red;
            border-radius:5px;"
            @click="jump"
            >登录</button> -->
        <van-tabs v-model="active" class="caipu">
            <van-tab title="菜谱" class="index-tabs">
                <van-empty description="菜谱上空空如也" />
            </van-tab>
            <van-tab title="作品" class="index-tabs">
                <van-empty description="还未发布作品" />
            </van-tab>
        </van-tabs>
      </div>
      <!-- 底部导航 -->
        <van-tabbar v-model="active_bar" active-color="#ee0a24">
        <van-tabbar-item name="home" icon="home-o" to="/">首页</van-tabbar-item>
        <van-tabbar-item name="collection" icon="star-o" to="/collection">收藏</van-tabbar-item>
        <van-tabbar-item name="me" icon="friends-o" to="/me">我的</van-tabbar-item>
        </van-tabbar>
  </div>
  </template>
</waike>
</template>
<script>
//引入外壳组件
import waike from "../components/waike.vue";
export default {
  components:{waike},
  data() {
    return {
      value:'',
      active: 2,
      active_bar:'me',
      avatar:'',
      uname:'',
    };
  },
  methods: {
    jump(){
      this.$router.push('/login')
    },
    onSearch(val) {
      // Toast(val);
      console.log(val)
    },
  }, 
  mounted(){ 
    console.log(this.$store.state.islogin)
    this.axios.get(`/user/list/${this.$store.state.uname}`).then(result=>{
      console.log(result.data)
      this.avatar=result.data.result[0].avatar
      this.uname=result.data.result[0].user_name
      // console.log(this.avatar,this.uname)
    })
  },
  watch:{
  }

}
</script>
<style scoped>
.me>.content{
  top: 3rem;
}
.index-tabs {
  width: 70%;
  margin-left:30%;
}
.user_cont{
  position: relative;
  top: -6rem;
}
.caipu{
    position: relative;
    top: 5rem;
    right: 15%;
}
.user_name{
  position:fixed;
  line-height:10px;
  margin-left:2rem; margin-top:1.5rem;
}
.update{
  position:fixed;
  line-height:10px;
  margin-left:2rem; margin-top:3.2rem;
  font-size: 12px;
}
.user_avatar{
  margin-top:0.5rem;
  position:fixed;
  line-height:5px; margin-left:4rem;
}
.avatar_left{
  float:left; width:2rem;
}
/* 关注，推荐，分类  字体颜色 */
.index-tabs>>>.van-tab{
  color: rgb(175, 173, 173);
}
.index-tabs>>> .van-tab--active{
  color: #000 ;
}
.index-tabs>>> .van-tabs__line{
  width: 20px;
}

</style>